<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width" name="viewport">
   <link rel="stylesheet" href="//cdn.bootcss.com/weui/0.4.3/style/weui.min.css">
   <link href="//cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css" rel="stylesheet">
      <link rel="stylesheet" href="http://203.195.235.76/jssdk/css/style.css">
    <title>拍照测试</title>
</head>
<body>
<div class="lbox_close wxapi_form">
      <span class="desc">开始发电</span>
      <button class="btn btn_primary" id="chooseImage1">开始发电</button>
      <span class="desc">结束发电</span>
      <button class="btn btn_primary" id="chooseImage2">结束发电</button>
</div>
<div id="domSelector1">
</div>
<div id="location1" style="color:#FF9900;">
 开始发电位置: &nbsp;经度<span id="lng1"></span> 纬度<span id="lat1"></span></br>
开始发电时间 : <span id="time1"></span></br>
</div>
<div id="code" class="weui_cell weui_cell_select">
  <div class="weui_cell_bd weui_cell_primary">
    <select class="weui_select" name="select1">
      <option selected="" value="0">距离最近的基站</option>
      <option value="1">观山湖区百花湖</option>
      <option value="2">观山湖区金元国际</option>
      <option value="3">观山湖区绿洲湾一期2</option>
    </select>
  </div>
</div>
<hr style=" height:2px;border:none;border-top:2px dotted #185598;"/>
<div id="domSelector2">
</div>
<div id="location2" style="color:#3c8de1;">
 结束发电位置: &nbsp;经度<span id="lng2"></span> 纬度<span id="lat2"></span></br>
 结束发电时间 : <span id="time2"></span></br>
</div>
<div style="color:#8A2BE2;">
发电用时:<span id="time" ></span>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/0.8.0/js/jquery-weui.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
$(function(){
    $.get('http://moriiy.wicp.net/admin/wx_api/getWeixinJsConfig',function(data){
    	wx.config({
		   debug: false,
		   appId: data.appId,
		   timestamp: data.timestamp,
		   nonceStr: data.nonceStr,
		   signature: data.signature,
		   jsApiList: ['chooseImage','uploadImage','openLocation','getLocation']
		});
		wx.ready(function(){
		});
	    wx.error(function(res){
	    });
    });
    var images1 = {
    	    localId: [],
    	    serverId: [],
    	    d:null
    };
    var images2 = {
    	    localId: [],
    	    serverId: [],
    	    d:null
    };
    $('#location1').hide();
    $('#location2').hide();
    $('#code').hide();
    $('#time').hide();
    $('#time1').hide();
    $('#time2').hide();
    $('#chooseImage1').click(function(){
    	wx.chooseImage({
    	    count: 9, // 默认9
    	    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有 ['original', 'compressed'],
    	    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    	    success: function (res) {
    	    	images1.localId  = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    	    	images1.d=new Date();
    	    	for(var i=0;i<res.localIds.length;i++){
        	    	 $('#domSelector1').append('<img src="' + images1.localId[i] + '" style="width:50%" />');
    	         }
    	         wx.getLocation({
    	             success: function (res) {
    	             	$('#lat1').text(res.latitude);
    	             	$('#lng1').text(res.longitude);
    	             	$('#time1').text(images1.d.getFullYear()+"-"+images1.d.getMonth()+"-"+images1.d.getDate()+" "+images1.d.getHours()+":"+images1.d.getMinutes()+":"+images1.d.getSeconds());
    	             	$('#time1').show();
    	             	$('#location1').show();
    	             	$('#code').show();
    	             },
    	             cancel: function (res) {
    	               alert('用户拒绝授权获取地理位置');
    	             }
    	         });
    	    }
    	});
    });
    $('#chooseImage2').click(function(){
    	wx.chooseImage({
    	    count: 9, // 默认9
    	    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有 ['original', 'compressed'],
    	    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    	    success: function (res) {
    	    	images2.localId  = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    	    	images2.d=new Date();
    	    	var i=parseInt((images2.d.getTime()-images1.d.getTime())/1000);
    	    	var s=i%60;
    	    	var m=parseInt(i/60%60);
    	    	var h=parseInt(i/60/60%60);
    	    	$('#time').text(h+"小时"+" "+m+"分 "+" "+s+"秒");
    	    	$('#time').show();
             	$('#time2').text(images2.d.getFullYear()+"-"+images2.d.getMonth()+"-"+images2.d.getDate()+" "+images2.d.getHours()+":"+images2.d.getMinutes()+":"+images2.d.getSeconds());
             	$('#time2').show();
    	    	for(var i=0;i<res.localIds.length;i++){
        	    	 $('#domSelector2').append('<img src="' + images2.localId[i] + '" style="width:50%" />');
    	         }
    	         wx.getLocation({
    	             success: function (res) {
    	             	$('#lat2').text(res.latitude);
    	             	$('#lng2').text(res.longitude);
    	             	$('#location2').show();
    	             },
    	             cancel: function (res) {
    	               alert('用户拒绝授权获取地理位置');
    	             }
    	         });
    	    }
    	});
    });
    $('#test2').click(function(){
        for(var i=0;i<images1.localId.length;i++){
            wx.uploadImage({
	            localId: images1.localId[0], // 需要上传的图片的本地ID，由chooseImage接口获得
	            isShowProgressTips: 1, // 默认为1，显示进度提示
	            success: function (res) {
	            	images1.serverId.push(res.serverId); // 返回图片的服务器端ID
	            }
	     });
        }
    });
});
var DEF_PI = 3.14159265359; // PI
var DEF_2PI = 6.28318530712; // 2*PI
var DEF_PI180 = 0.01745329252; // PI/180.0
var DEF_R = 6370693.5; // radius of earth
function getShortDistance(lon1, lat1, lon2, lat2) {
    var ew1, ns1, ew2, ns2;
    var dx, dy, dew;
    var distance;
    // 角度转换为弧度
    ew1 = lon1 * DEF_PI180;
    ns1 = lat1 * DEF_PI180;
    ew2 = lon2 * DEF_PI180;
    ns2 = lat2 * DEF_PI180;
    // 经度差
    dew = ew1 - ew2;
    // 若跨东经和西经180 度，进行调整
    if (dew > DEF_PI)
        dew = DEF_2PI - dew;
    else if (dew < -DEF_PI)
        dew = DEF_2PI + dew;
    dx = DEF_R * Math.cos(ns1) * dew; // 东西方向长度(在纬度圈上的投影长度)
    dy = DEF_R * (ns1 - ns2); // 南北方向长度(在经度圈上的投影长度)
    // 勾股定理求斜边长
    distance = Math.sqrt(dx * dx + dy * dy).toFixed(1);
    return distance;
}
</script>
</body>
</html>